<template>
	<view>
		<view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/circlePages/business')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
				场地服务
			</view>
			<view class="justify-content-item tn-margin tn-text-lg tn-color-grey" @click="tn">
				<text class="tn-padding-xs">全部</text>
				<text class="tn-icon-topics"></text>
			</view>
		</view>
		<view class="tn-info__container tn-margin-left tn-margin-right">
			<view v-for="(item,index) in HouseList" :key="index" class="tn-flex tn-margin-top-sm box" @click="onhouse(item)">
				<view class="left">
					<image :src="item.cover"></image>
				</view>
				<view class="tn-margin-left-sm">
					<view class="tilte f-3 top twoline-hide">
						{{item.name}}
					</view>
					<view class="tilte  m-top4 dis-flex flex-y-center">
						<view class="f-28 "> {{item.subtitle}}</view>
					</view>
					<view class="tilte  m-top4 dis-flex flex-y-center">
						<view class="f-28 "> {{item.area}}㎡</view>
					</view>
					<view class="tilte m-top4 dis-flex flex-y-center price">
						<view class="f-28 ">{{item.monthlyRent}}元/月</view>
					</view>
				</view>
		   </view>
		</view>
	</view>
</template>

<script>
	import {
		GetunleasedHouse
	} from '@/api/house/index'
	export default{
	    data(){
			return{
				cardCur2:0,
				HouseList:[]
			}
		},
	  mounted() {
	  	//房屋
	  	this.getunleasedHouse()
	  },
		methods:{
		// 跳转
		tn(e) {
			uni.navigateTo({
				url: `/subcontract/house/index`,
			});
		},
		onhouse(item){
			
		uni.navigateTo({
			url: `/subcontract/house/details?id=${item.id}`
		});
		},
		// resume
		resume(e) {
			this.cardCur2 = e.detail.current
		},
		getunleasedHouse() {
			let param = {
				pageable: 0
			}
			GetunleasedHouse(param).then((res) => {
				this.HouseList = res.data
			
			})
		},
		}
	}
</script>

<style lang="scss" scoped>
    .box{
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding: 20rpx;
	min-height: 250rpx;
	.left{
		width:250rpx;
		height:200rpx;
		image{
		width:250rpx;
		height:200rpx;	
		}
	}
	}
	/* 简历推荐 start */
	.card-swiper2 {
		height: 420rpx !important;
		overflow: hidden;
	}
	
	.card-swiper2 swiper-item {
		width: 680rpx !important;
		left: 30rpx;
		box-sizing: border-box;
		overflow: initial;
		padding: 0 0rpx 40rpx 0;
	}
	
	.card-swiper2 swiper-item .swiper-item1 {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(0.97);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		background-color: #E7FAFE;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item1 {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 50%;
		transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}
	
</style>